<template>
  <div style="width:100%;height: 100%;background-color: #fff;">
    <div id="graph-chart" ref="graphChart" style="width: 95%;height: 95%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import graph from "./1.json";
export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById("graph-chart"))
      let initOption = {
        tooltip: {},
        legend: [{
          data: graph.categories.map(function (a) {
            return a.name;
          })
        }],
        series: [
          {
            name: 'count',
            type: 'graph',
            layout: 'none',
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              show: true,
              formatter: '{b}'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
            }
          }
        ]
      }
      this.myChart.setOption(initOption, true)
      this.myChart.on('click', function (params) {
        console.log(params)
      })
    }
  }
}
</script>

<style>

</style>